<!--
 * @Date: 2023-02-20 10:33:37
 * @LastEditTime: 2023-03-30 15:37:34
 * @FilePath: /NLK/src/components/business/BangSelect.vue
 * 介绍:
-->
<script lang="ts" setup>
import { languageList } from "@@/language";
import { showDialog } from "vant";
import {changeLang} from "@@/hooks/sysHooks";

const { t } = useI18n();
const config = reactive({
  show: false,
});
function open() {
  config.show = true;
}
function close() {
  config.show = false;
}
defineExpose({ open, close });

function onClickChangeLang(langKey: string, currentLang: string) {
  showDialog({
    title: t("qing-que-ren"),
    message: `${t("que-ren-qie-huan-yu-yan-mang")}? ${t(
      "qie-huan-wei"
    )}:${currentLang}`,
  }).then(() => {
    changeLang(langKey);
    close();
  });
}
</script>

<template>
  <van-popup
    class="langSelect"
    v-model:show="config.show"
    teleport="body"
    round
  >
    <div class="langSelect_content">
      <div class="langSelect_header flex-J-SB">
        <span>{{ $t("yu-yan") }}</span>
        <VanButton @click="close" color="var(--C-M1)" :size="'small'">
          {{ $t("qu-xiao") }}
        </VanButton>
      </div>
      <div class="langSelect-select">
        <div
          @click="onClickChangeLang(langKey, languageList[langKey].currentLang)"
          v-for="langKey in $i18n.availableLocales"
          :key="langKey"
          class="langSelect_option flex-J-SB flex-A-C active"
        >
          <span>{{ languageList[langKey].currentLang }}</span>
          <van-icon
            v-if="$i18n.locale == langKey"
            name="success"
            color="var(--C-M1)"
          />
        </div>
      </div>
    </div>
  </van-popup>
</template>

<style lang="less" scoped>
.langSelect_content {
  padding: var(--gap-md);
  width: var(--page-W);
  .langSelect-select {
    margin-top: var(--gap-md);
  }
  .langSelect_option {
    border-bottom: 2rem var(--C-OT5) solid;
    padding: var(--gap-md) 0;
  }
}
</style>
